<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <meta charset="utf-8" />
        <title>Dashboard - Ace Admin</title>

        <meta name="description" content="overview &amp; stats" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

        <!-- bootstrap & fontawesome -->
        <link rel="stylesheet" href="__PUBLIC__/static/css/bootstrap.min.css" />
        <link rel="stylesheet" href="__PUBLIC__/static/css/font-awesome.min.css" />

        <!-- page specific plugin styles -->

        <!-- text fonts -->
        

        <!-- ace styles -->
        <link rel="stylesheet" href="__PUBLIC__/static/css/ace.min.css" />

        <!--[if lte IE 9]>
            <link rel="stylesheet" href="__PUBLIC__/static/css/ace-part2.min.css" />
        <![endif]-->
        <link rel="stylesheet" href="__PUBLIC__/static/css/ace-skins.min.css" />
        <link rel="stylesheet" href="__PUBLIC__/static/css/ace-rtl.min.css" />

        <!--[if lte IE 9]>
          <link rel="stylesheet" href="__PUBLIC__/static/css/ace-ie.min.css" />
        <![endif]-->

        <!-- inline styles related to this page -->

        <!-- ace settings handler -->
        <script src="__PUBLIC__/static/js/ace-extra.min.js"></script>

        <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->

        <!--[if lte IE 8]>
        <script src="__PUBLIC__/static/js/html5shiv.js"></script>
        <script src="__PUBLIC__/static/js/respond.min.js"></script>
        <![endif]-->
    </head>

    <body class="no-skin">
        {include file="common/header"}
        <div class="main-container" id="main-container">
            <script type="text/javascript">
                try{ace.settings.check('main-container' , 'fixed')}catch(e){}
            </script>

            {include file="common/left"}
            <div class="main-content">
                <div class="breadcrumbs" id="breadcrumbs">
                    <script type="text/javascript">
                        try{ace.settings.check('breadcrumbs' , 'fixed')}catch(e){}
                    </script>

                    <ul class="breadcrumb">
                        <li>
                            <i class="ace-icon fa fa-home home-icon"></i>
                            <a href="#">Home</a>
                        </li>
                        <li class="active">Dashboard</li>
                    </ul><!-- /.breadcrumb -->
                </div>

                <div class="page-content">
                    <div class="page-header">
                        <h1>
                            添加商品
                            <small>
                                <i class="ace-icon fa fa-angle-double-right"></i>
                                Add Goods
                            </small>
                        </h1>
                    </div><!-- /.page-header -->

                    <div class="row">
    <div class="col-xs-12">
        <!-- PAGE CONTENT BEGINS -->
        <form class="form-horizontal" role="form" id="form-book-add">
            <div class="form-group">
                <label class="col-sm-3 col-md-2 col-lg-1 control-label no-padding-right" for="form-field-2"> 书名</label>
                <div class="col-sm-9">
                    <input type="text" name="b_name" placeholder="最长不可超过100个汉字" class="col-xs-10 col-sm-5">
                    <span class="help-inline col-xs-12 col-sm-7">
                    <span class="middle">*</span>
                    </span>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 col-md-2 col-lg-1 control-label no-padding-right" for="form-field-2"> 书号（ISBN）</label>
                <div class="col-sm-9">
                    <input type="text"  placeholder="按照ISBN规格输入" name="b_isbn" class="col-xs-10 col-sm-5">
                    <span class="help-inline col-xs-12 col-sm-7">
                    <span class="middle">*</span>
                    </span>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 col-md-2 col-lg-1 control-label no-padding-right" for="form-field-2"> 作者</label>
                <div class="col-sm-9">
                    <input type="text"  placeholder="多名作者，请用英文逗号隔开" name="b_author" class="col-xs-10 col-sm-5">
                    <span class="help-inline col-xs-12 col-sm-7">
                    <span class="middle">*</span>
                    </span>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 col-md-2 col-lg-1 control-label no-padding-right" for="form-field-2"> 编辑</label>
                <div class="col-sm-9">
                    <input type="text"  placeholder="多名编辑，请用英文逗号隔开" name="b_editor" class="col-xs-10 col-sm-5">
                    <span class="help-inline col-xs-12 col-sm-7">
                    <span class="middle">*</span>
                    </span>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 col-md-2 col-lg-1 control-label no-padding-right" for="form-field-2"> 版次</label>
                <div class="col-sm-9">
                    <input type="text"  placeholder="一位阿拉伯数字" name="b_seq" class="col-xs-10 col-sm-5">
                    <span class="help-inline col-xs-12 col-sm-7">
                    <span class="middle">*</span>
                    </span>
                </div>
            </div>
            
            <div class="space-4">
            </div>
            <div class="form-group">
                <label class="col-sm-3 col-md-2 col-lg-1 control-label no-padding-right" for="form-field-tags">关键词</label>

                <div class="col-sm-9">
                    <div class="inline">
                        <input type="text" name="b_keywords" id="form-field-tags" title="关键词" value="Tag Input Control" placeholder="请输入关键词" />
                    </div>
                </div>
            </div>
            <div class="space-4">
             </div>
            <div class="form-group">
                <label class="col-sm-3 col-md-2 col-lg-1 control-label no-padding-right" for="form-field-tags">图书简介</label>

                <div class="col-sm-9 no-padding">
                    <div class="ueditor-container col-xs-10 col-sm-10">
                        <script id="container" name="content" type="text/plain">这里写你的初始化内容</script>
                    </div>
                   
                </div>
            </div>
            <div class="clearfix form-actions">
                <div class="col-md-offset-3 col-md-9">
                    <button class="btn btn-info" id="btn-submit" type="button">
                    <i class="ace-icon fa fa-check bigger-110"></i>
                                           保存
                    </button>
                                        &nbsp; &nbsp; &nbsp;
                    <button class="btn" type="reset">
                    <i class="ace-icon fa fa-undo bigger-110"></i>
                                           重置
                    </button>
                </div>
            </div>
            <div class="hr hr-24">
            </div>
            
  
            
           
        </form>

      
        
        

        <!-- PAGE CONTENT ENDS -->
    </div>
    <!-- /.col -->
</div>
<!-- /.row -->
                </div><!-- /.page-content -->
            </div><!-- /.main-content -->

            {include file="common/footer"}

            <a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
                <i class="ace-icon fa fa-angle-double-up icon-only bigger-110"></i>
            </a>
        </div><!-- /.main-container -->

        <!-- basic scripts -->

        <!--[if !IE]> -->
        <script src="__PUBLIC__/static/js/jquery-2.1.1.min.js"></script>

        <!-- <![endif]-->

        <!--[if IE]>
<script src="__PUBLIC__/static/js/jquery-1.11.1.min.js"></script>
<![endif]-->

        <!--[if !IE]> -->
        <script type="text/javascript">
            window.jQuery || document.write("<script src='assets/js/jquery.min.js'>"+"<"+"/script>");
        </script>

        <!-- <![endif]-->

        <!--[if IE]>
<script type="text/javascript">
 window.jQuery || document.write("<script src='assets/js/jquery1x.min.js'>"+"<"+"/script>");
</script>
<![endif]-->
        <script type="text/javascript">
            if('ontouchstart' in document.documentElement) document.write("<script src='assets/js/jquery.mobile.custom.min.js'>"+"<"+"/script>");
        </script>
        <script src="__PUBLIC__/static/js/bootstrap.min.js"></script>

        <!-- page specific plugin scripts -->

        <!--[if lte IE 8]>
          <script src="__PUBLIC__/static/js/excanvas.min.js"></script>
        <![endif]-->
        <script src="__PUBLIC__/static/js/bootstrap-tag.min.js"></script>
        <script src="__PUBLIC__/static/ueditor/ueditor.config.js"></script>
        <script src="__PUBLIC__/static/ueditor/ueditor.all.js"></script>
        <!-- ace scripts -->
        <script src="__PUBLIC__/static/js/ace-elements.min.js"></script>
        <script src="__PUBLIC__/static/js/ace.min.js"></script>

        <!-- inline scripts related to this page -->
        <script type="text/javascript">
        (function($){
            "use strict";


            $.fn.serializeObject = function()  
            {  
               var o = {};  
               var a = this.serializeArray();  
               $.each(a, function() {  
                   if (o[this.name]) {  
                       if (!o[this.name].push) {  
                           o[this.name] = [o[this.name]];  
                       }  
                       o[this.name].push(this.value || '');  
                   } else {  
                       o[this.name] = this.value || '';  
                   }  
               });  
               return o;  
            };  
            
            var ue =null;
            function init_tags_input(){
                var tag_input = $('#form-field-tags');
                try{

                    tag_input.tag(
                      {
                        placeholder:tag_input.attr('placeholder'),
                        //enable typeahead by specifying the source array
                        source: ace.vars['US_STATES'],//defined in ace.js >> ace.enable_search_ahead
                        /**
                        //or fetch data from database, fetch those that match "query"
                        source: function(query, process) {
                          $.ajax({url: 'remote_source.php?q='+encodeURIComponent(query)})
                          .done(function(result_items){
                            process(result_items);
                          });
                        }
                        */
                      }
                    );
            
                    //programmatically add a new
                    var $tag_obj = $('#form-field-tags').data('tag');
                    $tag_obj.add('Programmatically Added');
                }
                catch(e) {
                    //display a textarea for old IE, because it doesn't support this plugin or another one I tried!
                    tag_input.after('<textarea id="'+tag_input.attr('id')+'" name="'+tag_input.attr('name')+'" rows="3">'+tag_input.val()+'</textarea>').remove();
                    //$('#form-field-tags').autosize({append: "\n"});
                }

            }
            function init_ueditor(){
                 ue = UE.getEditor('container');
            }
            function bind_events(){
                $('#btn-submit').off("click").on("click",function(e){
                    e.preventDefault();
                    var data= $('#form-book-add').serializeObject();
                    console.log(data);
                }); 
            }




            $(function(){

                init_tags_input();
                init_ueditor();
                bind_events(); 
            })


        })(jQuery)

           
        </script>
    </body>
</html>
